01. Mockup to Article Overview

Mockup V1

Mockup to Article Overview

Project Overview

Hey there, web developer! Congratulations on making it this far! Here's your next project: translating a mockup to HTML. This is similar to the exercise from earlier in the problem set, except this article is going to be a bit more complicated. I'll be giving you a mockup of a website (and a copy of the text in it). It's going to be your job to recreate it with HTML.

You're going to see some formatting you haven't encountered before, so you'll need to use a resource, like the MDN element reference, to research new elements.

Project Instructions

Review the Article to Mockup Project Rubric. You'll get a rubric with every project in your Nanodegree program. Be sure to review the rubric before you submit each project so that you understand what criteria you'll be graded on. If you don't "Meet Specifications" on every rubric item, you'll always have a chance to submit the project again.

  1. Download and unzip mockup-to-article.zip in the Supporting Materials section, below. You'll find index.html, the article mockup image (blog-mockup.pdf) and a file called reflections.txt inside.
  2. Use what you've learned about web development so far to edit index.html so that it looks exactly like the mockup image. You will need to use new elements, which means that you'll need to research and experiment! (Hint: look up "superscript," "horizontal rule," and "strikethrough."). Note: You can recreate the mockup without using a single <br> tag! You don't need to worry about line breaks. The text should naturally wrap depending on how wide the window is.
  3. When you've finished building the article, open up reflections.txt. You've learned a lot about web development so far. I want you to take a moment to write down your thoughts about web development in reflections.txt. Answer the following questions:
    • What new skills have you learned?
    • What has been easy?
    • What has been difficult?
    • How have you used the problem solving strategies from the first project to overcome challenges so far?

Supporting Materials